<template>
  <div>
    <el-card>
      <el-tabs>
        <el-tab-pane label="商品分类">
          <div class="search">
            <el-input placeholder="请输入" style="width:40%;height:30px" />
            <el-button type="primary" size="small">搜索</el-button>
            <el-link type="primary">>>主要链接</el-link>
          </div>
          <div class="content">
            <el-tabs v-model="activeName">
              <el-tab-pane v-for="item in goodsType" :key="item.type" :label="item.typeName">
                <div v-for="obj in item.typeDescribe" :key="obj.index" class="type">
                  <img src="@/assets/1.jpeg" alt="">
                  <div>商品名字:{{ obj }}</div>
                  <div>所属商店：美佳宜</div>
                  <div>单价500g/25RMB</div>
                  <div>
                    <el-button size="small" type="primary">下载</el-button>
                    <el-button size="small" type="">编辑</el-button>
                    <el-button size="small" type="">删除</el-button>
                    <el-button size="small" type="">详情</el-button>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>
        <el-tab-pane label="所有商品">
          <div class="search">
            <div class="left">
              <span>商品名：</span>
              <el-input placeholder="请输入" />
            </div>
            <div class="middle">
              <span>类别：</span>
              <el-input placeholder="请输入" />
            </div>
            <div class="right">
              <span>所属店铺：</span>
              <el-input placeholder="请输入" />
            </div>
          </div>
          <div class="button">
            <div class="leftBtn">
              <el-button type="primary" size="small" @click="showAdd">+新建</el-button>
              <el-button size="small" type="primary">导出</el-button>
            </div>
            <div class="rightBtn">
              <el-button type="primary" size="small">查询</el-button>
              <el-button size="small"> 重置</el-button>
            </div>
          </div>
          <el-table :data="goodsList">
            <el-table-column type="selection" width="55" />
            <el-table-column label="商品编号" prop="goodsId" fixed="left" />
            <el-table-column label="商品名" prop="goodsName" />
            <el-table-column label="所属店铺" prop="shopName" />
            <el-table-column label="商品图" prop="goodsImg" />
            <el-table-column label="类型" prop="goodsId" />
            <el-table-column label="成本价" prop="costPrice" />
            <el-table-column label="原价" prop="originalPprice" />
            <el-table-column label="销售价" prop="salesPrice" />
            <el-table-column label="库存量" prop="stock" />
            <el-table-column label="月销售量" prop="monthlySales" />
            <el-table-column label="总销售量" prop="grossSales" />
            <el-table-column label="月销额" prop="MonthlySalesVolume" />
            <el-table-column label="总销售额" prop="totalSales" />
            <el-table-column label="参与活动" prop="ParticipateActivities" />
            <el-table-column label="是否热销" prop="SellLikeHotCakes" />
            <el-table-column label="是否推荐" prop="recommend" />
            <el-table-column label="状态" prop="status" />
            <el-table-column label="操作" fixed="right">
              <template slot-scope="{row}">
                <el-dropdown @command="handleCommand($event,row)">
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="上架">上架</el-dropdown-item>
                    <el-dropdown-item command="详情">详情</el-dropdown-item>
                    <el-dropdown-item command="删除" divided>删除</el-dropdown-item>
                    <el-dropdown-item command="编辑" divided>编辑</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 放置新增弹层 -->
    <addGoods v-if="showDialog" :show-add.sync="showDialog" :row-data.sync="currentData" @addOk="addOks($event)" />
  </div>
</template>

<script>
import { getGoodsList, getGoodsType, delGoods, editGoodsOfRow } from '@/api/shopList'
import addGoods from './components/addGoods'
export default {
  name: 'ProductlList',
  components: {
    addGoods
  },
  data() {
    return {
      goodsList: [],
      goodsType: [],
      activeName: '', // 选中的分类
      showDialog: false, // 显示新增弹层
      currentData: {}// 存储的是当前行的数据
    }
  },
  created() {
    this.getGoodsList()
    this.getGoodsType()
  },
  methods: {
    /**
     * 获取所有商品
     */
    async getGoodsList() {
      const { data } = await getGoodsList()
      this.goodsList = data.data
    },
    /**
     * 获取商品分类
     */
    async getGoodsType() {
      const { data } = await getGoodsType()
      this.goodsType = data.data
    },
    /**
     * 判断是哪种操作
     */
    async  handleCommand(command, row) {
      if (command === '上架') {
        // 上架操作
        if (row.status === '下架') {
          await editGoodsOfRow({ status: '上架', id: row.id })
          this.getGoodsList()
          return this.$message.success('状态已经改为上架')
        } else {
          return this.$message.warning('已经是上架的状态了')
        }
      } else if (command === '详情') {
        // 详情操作
      } else if (command === '编辑') {
        // 编辑操作
        this.showDialog = true
        this.currentData = row
      } else if (command === '删除') {
        // 删除操作
        this.$confirm('确定是否删除').then(async() => {
          await delGoods(row.id)
          this.$message.success('删除商品成功')
          this.getGoodsList()
        })
      }
    },
    async showAdd() {
      this.showDialog = true
    },
    // 新增成功后的自定义事件
    addOks(datas) {
      this.showDialog = datas
      this.getGoodsList()
    }
  }
}
</script>

<style lang="less" scoped>
.search{
  display: flex;
  justify-content: center;
  margin: 30px 10px;
}
.el-link.el-link--primary{
margin-left: 10px;
  font-size: 7px;
}
/deep/.el-input__inner{
  height: 32px;
}
.content{
  .el-tab-pane{
    display: flex;
  }
  .type{
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid skyblue;
    img{
      width: 200px;
      height: 200px;
      border-bottom: 1px solid blue;
    }
    div{
      font-size: 14px;
    }
  }
}
.search{
  display: flex;
  .left{
    display: flex;
    font-size: 14px;
    align-items: center;
    margin-right: 30px;
    .el-input{
      width: 200px;
    }
  }
  .middle{
    display: flex;
    font-size: 14px;
    align-items: center;
    margin-right: 30px;
    .el-input{
      width: 200px;
    }
  }
  .right{
    display: flex;
    font-size: 14px;
    align-items: center;
    .el-input{
      width: 200px;
    }
  }
}
.button{
  display: flex;
  justify-content: space-between;
}
</style>
